<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <el-page-header @back="goBack" content="购买页面" class="header"></el-page-header>
    <div class="body">
      <div>
        <div class="body-item1">
          <el-image
    style="width: 200px"
    :src="this.$route.params.src"
    :preview-src-list="srcList">
  </el-image>
      </div>
      <div class="body-item2">
        <div class="item2-item1">
          <div class="item1-content1">
            <h3>{{ this.$route.params.name }}</h3>
          </div>
          <div class="item1-content2">
            <div>销售价：{{ this.$route.params.price }}</div>
            <div>
              <p> 销售数量
              <button @click="num == 0 ? 0 : num --">-</button>
              <button>{{ num }}</button>
              <button @click="num++">+</button></p>
            </div>
            <div class="money">所需金额：￥{{ total }}</div>
            <div class="content2-item3"><button class="item3-button">立即购买</button><button class="item3-button">加入购物车</button></div>
          </div>
        </div>
        <div class="item2-item2">
          <div class="item2-content1">
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="hello_world">
      <button class="top" @click="toTop">
        <img src="@/assets/backToTop.png" width="100%">
      </button>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'z_seven_shop',
  data () {
    return {
      num: 0,
      url: 'https://res.vmallres.com//uomcdn/CN/pms/202309/A69219E4FE787103F8F24DFB3CF22274.jpg',
      srcList: [
        'https://res.vmallres.com//uomcdn/CN/pms/202309/A69219E4FE787103F8F24DFB3CF22274.jpg'
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toTop () {
      window.location.reload()
    },
    sunAdd () {
      this.num = this.num + 1
    },
    sumDelete () {
      if (this.num === 0) {
        this.num = this.num - 0
      } else {
        this.num = this.num - 1
      }
    }
  },
  computed: {
    total () {
      return this.num * Number(this.$route.params.price.substring(1))
    }
  },
  mounted () {
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.money{
  margin-bottom:10px ;
}
.item3-button{
  background-color: red;
  border-radius: 5px;
  margin: 3px;
  opacity: 0.8;
}
.item1-content2{
  margin-top: 10px;
  margin-bottom: 10px;
}
.item2-content2{
  margin-top: 10px;
  margin-bottom: 10px;
}
.item1-content1{
  border-bottom: solid 1px gray;
}
.item2-content1{
  border-bottom: solid 1px gray;
}
.item2-item2{
  width: 440px;
  margin: 2px;
  border: solid 1px gray;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 5px;
}
.item2-item1{
  width: 440px;
  margin: 2px;
  border: solid 1px gray;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 5px;
}
.top{
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 100px;
  right: 5px;
  background-color: #fff;
  border: solid 1px gray;
  border-radius: 50%;
}
.body-item1{
  width: 450px;
  height: 50%;
}
.father{
  width: 450px;
  height: 100%;
}
.header{
  width: 100%;
  height:5%;
}

.body{
  width: 450px;
  height: 600px;
  overflow: hidden;
  background-color: #888;
  border-bottom: solid 1px gray;
}
</style>
